<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="../css/login.css">
    <!--导入jquery-->
    <script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
    <script src="../js/angular.min.js" type="text/javascript"></script>
    <!--导入官网的axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<section id="login_wrap">
    <div class="fullscreen-bg" style="height: 532px;"></div>
    <div class="login-box">
        <div class="title">
            <span>一天商城</span>
        </div>
        <div class="login_inner">
            <!--登录错误提示消息-->
            <div id="errorMsg" class="alert alert-danger"><font size="3px"></font></div>
            <form id="loginForm" method="post" accept-charset="utf-8">
                <input type="hidden" name="action" value="login"/>
                <input name="username" id="username" type="text" placeholder="请输入用户名" autocomplete="off">
                <input name="password" id="password" type="text" placeholder="请输入密码" autocomplete="off">
                <div class="verify">
                    <input name="check" id="loginCode" type="text" placeholder="请输入验证码" autocomplete="off">
                    <span><img src="../checkCode/find" alt="" id="codePicture" onclick="changeCheckCode(this)"></span>
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src = "../checkCode/find?" + new Date().getTime();
                        }
                    </script>
                </div>
                <br/>
                <div class="submit_btn">
                    <button type="submit" id="btm_sub">登录</button>
                </div>
            </form>
            <div class="reg">没有账户？<a href="register.html">立即注册</a></div>
        </div>
    </div>
</section>
</body>

<script>
    //登录
    jQuery("#btm_sub").click(function () {
        //判断验证码是否正确
        jQuery.ajax({
            url: 'http://localhost:8081/checkCode/check',
            type: 'post',
            dataType: 'json',
            data: {
                "code": $("#loginCode").val()
            },
            success: function (data) {
                if (data.flag) {
                    //提交表单数据
                    jQuery.post("/users/loginUser", jQuery("#loginForm").serialize(), function (data) {        //传输地址、传输参数、回调函数
                        //3、处理响应结果（flag:true/false&errorMsg:……）
                        if (data.flag) {
                            alert(data.info)
                            location.href = "main.html";
                        } else {
                            //登录失败
                            $("#errorMsg").html(data.info)
                            //重新刷新验证码
                            document.getElementById("codePicture").click()
                            jQuery("#loginCode").val("")
                        }
                    })
                } else {
                    alert(data.info)
                    //重新刷新验证码
                    document.getElementById("codePicture").click()
                    jQuery("#loginCode").val("")
                }
            }
        })
        //2、跳转页面（校验不成功）
        return false;
    })
</script>